<template>
    <van-nav-bar title="订单详情" left-arrow @click-left="back" />
    <section class="aui-flexView">
      <!-- 订单详细 -->
      <section class="aui-scrollView">
        <!-- 订单状态 -->
        <div class="aui-pay-change">
          <div class="aui-flex">
            <div class="aui-flex-box">
              <h3>{{orderInfo.status_text}}</h3>
            </div>
            <div class="aui-pay-zfb">
              <img src="/assets/images/icon-zfb.png" alt="" />
            </div>
          </div>
        </div>
  
        <!-- 收货地址 -->
        <div class="aui-flex">
          <div class="aui-flex-add">
            <img src="" alt="" />
          </div>
          <div class="aui-flex-box">
            <h3>{{ orderInfo.consignee }} <em>{{ orderInfo.mobile }}</em></h3>
          <p>{{ orderInfo.region_text }}</p>
          </div>
        </div>
  
        <!-- 订单商品 -->
        <div class="aui-commodity-bg" v-for="item in orderInfo.product" :key="item.id" style="background: transparent">
          <div style="margin-bottom: 10px; background: #f5f5f5">
            <div class="aui-flex" >
              <div @click="clickThumb(item.product.id)" class="aui-commodity-img">
                <img :src="item.product.thumbs_text" />
              </div>
              <div class="aui-flex-box">
                <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
                <p>商品单价：￥{{ item.product.price }}</p>
                <span class="aui-barter-time">七天退换</span>
              </div>
              <div>
                <h5>￥{{ item.total }}</h5>
                <p class="aui-sml-text">X{{ item.pronum }}</p>
              </div>
            </div>
  
            <div style="text-align: right">
              <van-button @click="comment(item.id)" type="primary" size="mini" v-if="item.status == '0' && orderInfo.status == 3">评价</van-button>
            </div>
          </div>
        </div>
  
        <!-- 总价 -->
        <div class="aui-cp-edu b-line">
          <div class="aui-flex aui-flex-ed">
            <div class="aui-flex-box" style="color: #333; font-size: 15px">
              订单总价<em style="color: #333">￥{{ orderInfo.amount }}</em>
            </div>
          </div>
        </div>
  
        <div class="divHeight b-line"></div>
  
        <!-- 订单详细内容 -->
        <div class="aui-flex aui-flex-text-sml b-line orderinfo">
          <div class="aui-flex-box">
            <p>
              <em>订单号:{{ orderInfo.code }}</em>
             
            </p>
            <p v-if="orderInfo.expressid">
              <em>配送物流: {{ orderInfo.express.name }}</em>
              
            </p>
            <p v-if="orderInfo.expressid">
              <em>物流单号:{{ orderInfo.expresscode }}</em>
             
            </p>
            <p>
              <em>下单时间:{{ orderInfo.createtime }}</em>
             
            </p>
            <p>
              <em>订单状态:{{ orderInfo.status_text }}</em>
            
            </p>
            <p>
              <em>订单备注:{{ orderInfo.remark }}</em>

            </p>
          </div>
        </div>
      </section>
  
      <footer class="aui-footer aui-footer-fixed">
        <div class="aui-footer-text-info" @click="refund(orderInfo.id)" v-if="orderInfo.status > 0 && orderInfo.status != 4">
          <a href="javascript:;" class="aui-payment" >申请退货</a>
        </div>
        <div class="aui-footer-text-info" @click="confirm(orderInfo.id)" v-if="orderInfo.status == 2">
          <a href="javascript:;" class="aui-payment" >确认收货</a>
        </div>
        <div class="aui-footer-text-info" v-if="orderInfo.status == 0">
          <a href="javascript:;" class="aui-payment" @click="pay(orderInfo.id)">确认支付</a>
        </div>
      </footer>
    </section>
</template>

<script setup>
import { onBeforeMount } from "vue";

    const {proxy} = getCurrentInstance();
    const back = () => proxy.$router.push("/order/index");

    // 点击商品图片
    const clickThumb = (proid) => {
        proxy.$router.push({
            path:"/product/detail",
            query:{proid}
        })
    }

    // 收货
const confirm = async (orderid)=>{
    proxy.$dialog({
        title:"提醒",
        message:"确认收到货了吗?"
    }).then(async()=>{
        let data = {
            // 订单id
            orderid,
        }
        let result = await proxy.$POST({
            url:"/business/confirm",
            params:data,
        })
        if(result.code){
          getData()
        }else{
            proxy.$fail(result.msg)
            return false
        }
        }).catch(err=>{
            console.log(err)
        })
    }

    // 退款
    const refund =  (orderid) => {
        proxy.$router.push({
            path:"/order/refund",
            query:{
                orderid
            }
        })
    }

    onBeforeMount(()=>{
        getData()
    })

    // 发送请求，获得订单信息
    const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{};
    const orderid = proxy.$route.query.orderid?proxy.$route.query.orderid:0
    let orderInfo = ref({
        express:{}
    });
    const getData = async () => {
        let data = {
            busid:userInfo.id,
            orderid:orderid
        }
        let result = await proxy.$POST({
            url:"/business/orderInfo",
            params:data
        })
        if(result.code){
            orderInfo.value = result.data
            return false
        }else{
            proxy.$fail(result.msg);
            return false
        }
    }

    // 确认支付
const pay = async (orderid)=>{
  proxy.$dialog({
      title:"提醒",
      message:"确认要立即支付吗?"
  }).then(async()=>{
      let data = {
          // 订单id
          orderid,
          // 用户id
          busid:userInfo.id
      }
      let result = await proxy.$POST({
          url:"/cart/payOrder",
          params:data,
      })
      if(result.code){
          proxy.$success({
              message:result.msg,
              duration:1000,
              onClose:()=>{
                getData()
              }
          })
      }else{
          proxy.$fail(result.msg)
          return false
      }
  }).catch(err=>{
      console.log(err)
  })
}


// 评价
const comment = (orderProductId) => {
    proxy.$router.push({
        path:"/order/comment",
        query:{orderProductId,orderid}
    })
}
</script>

<style>
    @import url("/assets/css/info.css");
</style>